<template>
  <view>
    <view class="container" :style="{'padding-bottom': `${52+inputBottom}px`}">
		<view class="content" @touchstart="hideDrawer">
			<z-paging
				ref="paging"
				class="msg-list"
				v-model="msgList"
				:auto="false"
				@refresherTouchend="queryList"
				:show-loading-more-no-more-view="false"
				:safe-area-inset-bottom="true">
				<template #top>
					<view class="header">
						<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
							<!-- #ifndef H5 -->
							<view class="fillBox" :style="{height:$u.sys().statusBarHeight+'px'}"></view>
							<!-- #endif -->
							<view class="nav-box" v-if="toUserInfo">
								<view class="nav-left">
									<!-- #ifndef H5 -->
									<image src="../../static/message/arrow-left.png" class="arrow-left" @click="navigatorBack"></image>
									<!-- #endif -->
									<view class="user-box">
										<image :src="toUserInfo.avatar" class="user-avatar" mode="aspectFill" @click="showUser=true">
										</image>
										<view class="user-info">
											<view class="name">
												<text>{{toUserInfo.nickname}}</text>
											</view>
											<view class="detail" v-if="to_user_id != 3">
												<text style="color: #F169F6;">
													<text style="margin-right: 10rpx;" v-if="toUserInfo.distance">{{toUserInfo.distance}}km |</text>
												</text>
												<text>
													{{toUserInfo.city}} | {{toUserInfo.age}}岁
												</text>
											</view>
										</view>
									</view>
								</view>
								<view class="nav-right">
									<view class="unlock" @click="lookWechat" v-if="to_user_id!=3&&userInfo&&userInfo.gender==1">
										<image src="../../static/common/icon_wx.png" class="icon_wx"></image>
										查看
									</view>
									<image src="../../static/common/icon_more.png" class="more" @click="showAction=true" v-if="to_user_id!=3"></image>
								</view>
							</view>
							<view class="waring-text" @click="$Tips('/pages/richText/richText?biaoshi=preventing_fraud')" v-if="to_user_id!=3">
								请勿轻易转账，警惕裸聊诈骗，涉嫌色情等违禁内容请举报 <u-icon name="arrow-right" size="14" color="#F169F6"></u-icon>
							</view>
					</view>
				</template>
				<scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
				  <view>
					<view class="row" v-for="(row,index) in msgList" :key="index">
						<!-- 系统消息 -->
						<view>
							<view class="system">
								<view class="text">{{row.datetime}}</view>
							</view>
						</view>
						<!-- 用户消息 -->
						<view v-for="(item,msgIndex) in row.data" :key="msgIndex" :id="'msg'+item.id" style="margin-top: 20rpx;">
							<!-- 自己发出的消息 -->
							<view class="my" v-if="item.sender=='me'">
								<!-- 左-消息 -->
								<view class="left">
									<!-- 文字消息 -->
									<view class="bubble" v-if="item.msg_type==1">
										<rich-text :nodes="item.message"></rich-text>
									</view>
									<!-- 语言消息 -->
									<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
										<view class="length">
											{{row.msg.content.length}}
										</view>
										<view class="icon my-voice"></view>
									</view> -->
									<!-- 图片消息 -->
									<view v-if="item.msg_type==2" class="bubble" @tap="showPic(item.message)">
										<image :src="item.message" mode="aspectFill" class="image"></image>
									</view>
									<!-- 卡片消息 -->
									<view class="card-box" v-if="item.msg_type==3">
										<view class="card-top">
											<view class="top-left">
												<image src="../../static/common/icon_wx.png" class="wechat"></image>
												<view>微信</view>
											</view>
										</view>
										<view class="card-bottom">
											<view class="bottom-right">
												{{item.message}}
											</view>
										</view>
									</view>
								</view>
								<!-- 右-头像 -->
								<view class="right" v-if="userInfo">
									<image :src="$OssUrl(userInfo.avatar)" mode="aspectFill"></image>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other" v-if="item.sender=='you'&&toUserInfo">
								<!-- 左-头像 -->
								<view class="left">
									<image :src="toUserInfo.avatar" @click="showUser=true" mode="aspectFill"></image>
								</view>
								<!-- 右-用户名称-时间-消息 -->
								<view class="right">
									<view class="username">
										<view class="name">{{toUserInfo.nickname}}</view>
										<!--<view class="time">{{item.createtime}}</view>-->
									</view>
									<!-- 文字消息 -->
									<view class="bubble" v-if="item.msg_type==1">
										<rich-text :nodes="item.message"></rich-text>
									</view>
									<!-- 图片消息 -->
									<view v-if="item.msg_type==2" class="bubble" @tap="showPic(item.message)">
										<image :src="item.message" mode="aspectFill" class="image"></image>
									</view>
									<!-- 卡片消息 -->
									<view class="card-box" v-if="item.msg_type==3">
										<view class="card-top">
											<view class="top-left">
												<image src="../../static/common/icon_wx.png" class="wechat"></image>
												<view>微信</view>
											</view>
											<view class="top-right" v-if="!toUserInfo.is_unlock">解锁</view>
										</view>
										<view class="card-bottom">
											<image src="../../static/HM-chat/suo.png" class="bottom-left" v-if="!toUserInfo.is_unlock">
											</image>
											<view class="bottom-right" v-if="!toUserInfo.is_unlock" @click="lookWechat">解锁后查看</view>
											<view class="bottom-right" v-if="toUserInfo.is_unlock">{{item.message}}</view>
										</view>
									</view>
									<!-- 语音消息 -->
									<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
										<view class="icon other-voice"></view>
										<view class="length">
											{{row.msg.content.length}}
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				  </view>
				</scroll-view>
			</z-paging>
		</view>
    </view>
	<!-- 抽屉栏 -->
	<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
		<!-- 表情 -->
		<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
			<swiper-item v-for="(page,pid) in emojiList" :key="pid">
				<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
					<image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 更多功能 相册-拍照-红包 -->
		<view class="more-layer" :class="{hidden:hideMore}">
			<view class="list">
				<view class="box" @tap="chooseImage">
					<image src="../../static/HM-chat/xiangce1.png" class="icon"></image>
				</view>
				<view class="box" @tap="camera">
					<image src="../../static/HM-chat/paizhao1.png" class="icon"></image>
				</view>
				<view class="box" @tap="chooseCard" v-if="to_user_id!=3&&userInfo&&userInfo.gender==2">
					<image src="../../static/HM-chat/kapian.png" class="icon"></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部输入栏 -->
	<view class="bottom-textarea input-box" :style="isShowKeyBoard ? {bottom: inputBottom+'px'}:{}" @touchmove.stop.prevent="discard" v-if="toUserInfo && !toUserInfo.is_black">
		<!-- H5下不能录音，输入栏布局改动一下 -->
		<!-- #ifndef H5 -->
		<view class="voice">
			<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="more" @tap="showMore">
			<view class="icon add"></view>
		</view>
		<!-- #endif -->
		<view class="textbox">
			<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
			<view class="text-mode" :class="isVoice?'hidden':''">
				<view class="textarea-container">
				  <textarea
				    v-model="textMsg"
				    :maxlength="-1"
				    :auto-height="true"
				    :show-confirm-bar="false"
				    :cursor-spacing="10"
				    :fixed="true"
				    :adjust-position="false"
				    @focus="focusTextarea"
				    @blur="blurTextarea"
				  />
				</view>
				<view class="em" @tap="chooseEmoji">
					<view class="icon biaoqing"></view>
				</view>
			</view>
		</view>
		<!-- #ifndef H5 -->
		<view class="more" @tap="showMore">
			<view class="icon add"></view>
		</view>
		<!-- #endif -->
		<view class="send" style="margin-right: 32rpx;" :class="isVoice?'hidden':''" @tap="sendText">
			<view class="btn">发送</view>
		</view>
	  
	</view>

	<view class="black-input" v-if="toUserInfo&&toUserInfo.is_black">
		您已经被对方拉黑
	</view>
	<!-- 录音UI效果 -->
	<view class="record" style="z-index: 1000;" :class="recording?'':'hidden'">
		<view class="ing" :class="willStop?'hidden':''">
			<view class="icon luyin2"></view>
		</view>
		<view class="cancel" :class="willStop?'':'hidden'">
			<view class="icon chehui"></view>
		</view>
		<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
	</view>
	<unLockPopup :show="showUnLock" @close="showUnLock=false" @success="unLockSuccess" :to_user_id="to_user_id">
	</unLockPopup>
	<wechatPopup :show="showWechat" @close="showWechat=false" :userWechat="userWechat"></wechatPopup>
	<u-action-sheet :actions="actionList" :show="showAction" @select="selectAction" cancelText="取消" @close="showAction=false"></u-action-sheet>
	<userPopup :show="showUser" @close="showUser=false" @followSuccess="followSuccess" :user_id="to_user_id">
	</userPopup>
	<authentication :show="showAuth" @close="showAuth=false" @success="authSuccess"></authentication>
	<u-popup :show="showImprove" round="24rpx" mode="center" :safeAreaInsetBottom="false">
		<view class="contentBox">
			<!-- <image class="popup-close" src="../../static/common/icon_close.png" @click="cancelInfo" /> -->
			<image src="../../static/common/icon_improve.png" class="popup-image"></image>
			<view class="popup-title">未填写微信信息</view>
			<view class="popup-tips">
				前往补全基础信息，可以提高认证通过率和更多曝光哦~
			</view>
			<view class="button-group">
				<view class="button1" @click="completeInfo">
					前往补全资料
				</view>
				<view class="popup-tips" @click="showImprove= false">下次再说</view>
			</view>
		</view>
	</u-popup>
  </view>
</template>

<script>
import unLockPopup from '@/components/UnLockPopup.vue';
import wechatPopup from '@/components/WeChatPopup.vue';
import WebSocketClass from '@/utils/websocket.js';
import authentication from '@/components/Authentication.vue';
import userPopup from '@/components/UserPopup.vue';
import { HTTP_WSS_URL } from '@/config/app';
const app = getApp();
export default {
  data() {
    return {
		scrollTop: 1000,
		inputBottom: 0,
		pageBg: '/static/common/page_bg2.png',
		chartConfig: null,
		to_user_id: null,
		session_id: null,
		toUserInfo: null, //用户信息
		userInfo: null, //当前用户信息
		showUnLock: false,
		showWechat: false,
		userWechat: null, //微信信息
		showAction: false,
		showAuth: false,
		showUser: false,
		showImprove: false,
		actionList: [
			{
				name: '关注',
			},
			{
				name: '拉黑',
			},
			{
				name: '举报', //开启后文字不显示
				color: '#F169F6',
			}
		],
		//文字消息
		textMsg: '',
		msgList: [],
		msgInfo: null,
		msgImgList: [],
		myuid: 0,
		//录音相关参数
		// #ifndef H5
		//H5不能录音
		RECORDER: uni.getRecorderManager(),
		// #endif
		isVoice: false,
		voiceTis: '按住 说话',
		recordTis: "手指上滑 取消发送",
		recording: false,
		willStop: false,
		isShowKeyBoard: false,
		initPoint: {
			identifier: 0,
			Y: 0
		},
		recordTimer: null,
		recordLength: 0,
		//播放语音相关参数
		AUDIO: uni.createInnerAudioContext(),
		playMsgid: null,
		VoiceTimer: null,
		// 抽屉参数
		popupLayerClass: '',
		// more参数
		hideMore: true,
		//表情定义
		hideEmoji: true,
		emojiList: [
			[
				{
					"url": "100.gif",
					alt: "[微笑]"
				},
				{
					"url": "101.gif",
					alt: "[伤心]"
				},
				{
					"url": "102.gif",
					alt: "[美女]"
				},
				{
					"url": "103.gif",
					alt: "[发呆]"
				},
				{
					"url": "104.gif",
					alt: "[墨镜]"
				},
				{
					"url": "105.gif",
					alt: "[哭]"
				},
				{
					"url": "106.gif",
					alt: "[羞]"
				},
				{
					"url": "107.gif",
					alt: "[哑]"
				},
				{
					"url": "108.gif",
					alt: "[睡]"
				},
				{
					"url": "109.gif",
					alt: "[哭]"
				},
				{
					"url": "110.gif",
					alt: "[囧]"
				},
				{
					"url": "111.gif",
					alt: "[怒]"
				},
				{
					"url": "112.gif",
					alt: "[调皮]"
				},
				{
					"url": "113.gif",
					alt: "[笑]"
				},
				{
					"url": "114.gif",
					alt: "[惊讶]"
				},
				{
					"url": "115.gif",
					alt: "[难过]"
				},
				{
					"url": "116.gif",
					alt: "[酷]"
				},
				{
					"url": "117.gif",
					alt: "[汗]"
				},
				{
					"url": "118.gif",
					alt: "[抓狂]"
				},
				{
					"url": "119.gif",
					alt: "[吐]"
				},
				{
					"url": "120.gif",
					alt: "[笑]"
				},
				{
					"url": "121.gif",
					alt: "[快乐]"
				},
				{
					"url": "122.gif",
					alt: "[奇]"
				},
				{
					"url": "123.gif",
					alt: "[傲]"
				},
			],
			[
				{
					"url": "124.gif",
					alt: "[饿]"
				},
				{
					"url": "125.gif",
					alt: "[累]"
				},
				{
					"url": "126.gif",
					alt: "[吓]"
				},
				{
					"url": "127.gif",
					alt: "[汗]"
				},
				{
					"url": "128.gif",
					alt: "[高兴]"
				},
				{
					"url": "129.gif",
					alt: "[闲]"
				},
				{
					"url": "130.gif",
					alt: "[努力]"
				},
				{
					"url": "131.gif",
					alt: "[骂]"
				},
				{
					"url": "132.gif",
					alt: "[疑问]"
				},
				{
					"url": "133.gif",
					alt: "[秘密]"
				},
				{
					"url": "134.gif",
					alt: "[乱]"
				},
				{
					"url": "135.gif",
					alt: "[疯]"
				},
				{
					"url": "136.gif",
					alt: "[哀]"
				},
				{
					"url": "137.gif",
					alt: "[鬼]"
				},
				{
					"url": "138.gif",
					alt: "[打击]"
				},
				{
					"url": "139.gif",
					alt: "[bye]"
				},
				{
					"url": "140.gif",
					alt: "[汗]"
				},
				{
					"url": "141.gif",
					alt: "[抠]"
				},
				{
					"url": "142.gif",
					alt: "[鼓掌]"
				},
				{
					"url": "143.gif",
					alt: "[糟糕]"
				},
				{
					"url": "144.gif",
					alt: "[恶搞]"
				},
				{
					"url": "145.gif",
					alt: "[什么]"
				},
				{
					"url": "146.gif",
					alt: "[什么]"
				},
				{
					"url": "147.gif",
					alt: "[累]"
				},
			],
			[
				{
					"url": "148.gif",
					alt: "[看]"
				},
				{
					"url": "149.gif",
					alt: "[难过]"
				},
				{
					"url": "150.gif",
					alt: "[难过]"
				},
				{
					"url": "151.gif",
					alt: "[坏]"
				},
				{
					"url": "152.gif",
					alt: "[亲]"
				},
				{
					"url": "153.gif",
					alt: "[吓]"
				},
				{
					"url": "154.gif",
					alt: "[可怜]"
				},
				{
					"url": "155.gif",
					alt: "[刀]"
				},
				{
					"url": "156.gif",
					alt: "[水果]"
				},
				{
					"url": "157.gif",
					alt: "[酒]"
				},
				{
					"url": "158.gif",
					alt: "[篮球]"
				},
				{
					"url": "159.gif",
					alt: "[乒乓]"
				},
				{
					"url": "160.gif",
					alt: "[咖啡]"
				},
				{
					"url": "161.gif",
					alt: "[美食]"
				},
				{
					"url": "162.gif",
					alt: "[动物]"
				},
				{
					"url": "163.gif",
					alt: "[鲜花]"
				},
				{
					"url": "164.gif",
					alt: "[枯]"
				},
				{
					"url": "165.gif",
					alt: "[唇]"
				},
				{
					"url": "166.gif",
					alt: "[爱]"
				},
				{
					"url": "167.gif",
					alt: "[分手]"
				},
				{
					"url": "168.gif",
					alt: "[生日]"
				},
				{
					"url": "169.gif",
					alt: "[电]"
				},
				{
					"url": "170.gif",
					alt: "[炸弹]"
				},
				{
					"url": "171.gif",
					alt: "[刀子]"
				},
			],
			[
				{
					"url": "172.gif",
					alt: "[足球]"
				},
				{
					"url": "173.gif",
					alt: "[瓢虫]"
				},
				{
					"url": "174.gif",
					alt: "[翔]"
				},
				{
					"url": "175.gif",
					alt: "[月亮]"
				},
				{
					"url": "176.gif",
					alt: "[太阳]"
				},
				{
					"url": "177.gif",
					alt: "[礼物]"
				},
				{
					"url": "178.gif",
					alt: "[抱抱]"
				},
				{
					"url": "179.gif",
					alt: "[拇指]"
				},
				{
					"url": "180.gif",
					alt: "[贬低]"
				},
				{
					"url": "181.gif",
					alt: "[握手]"
				},
				{
					"url": "182.gif",
					alt: "[剪刀手]"
				},
				{
					"url": "183.gif",
					alt: "[抱拳]"
				},
				{
					"url": "184.gif",
					alt: "[勾引]"
				},
				{
					"url": "185.gif",
					alt: "[拳头]"
				},
				{
					"url": "186.gif",
					alt: "[小拇指]"
				},
				{
					"url": "187.gif",
					alt: "[拇指八]"
				},
				{
					"url": "188.gif",
					alt: "[食指]"
				},
				{
					"url": "189.gif",
					alt: "[ok]"
				},
				{
					"url": "190.gif",
					alt: "[情侣]"
				},
				{
					"url": "191.gif",
					alt: "[爱心]"
				},
				{
					"url": "192.gif",
					alt: "[蹦哒]"
				},
				{
					"url": "193.gif",
					alt: "[颤抖]"
				},
				{
					"url": "194.gif",
					alt: "[怄气]"
				},
				{
					"url": "195.gif",
					alt: "[跳舞]"
				},
			],
			[
				{
					"url": "196.gif",
					alt: "[发呆]"
				},
				{
					"url": "197.gif",
					alt: "[背着]"
				},
				{
					"url": "198.gif",
					alt: "[伸手]"
				},
				{
					"url": "199.gif",
					alt: "[耍帅]"
				},
				{
					"url": "200.png",
					alt: "[微笑]"
				},
				{
					"url": "201.png",
					alt: "[生病]"
				},
				{
					"url": "202.png",
					alt: "[哭泣]"
				},
				{
					"url": "203.png",
					alt: "[吐舌]"
				},
				{
					"url": "204.png",
					alt: "[迷糊]"
				},
				{
					"url": "205.png",
					alt: "[瞪眼]"
				},
				{
					"url": "206.png",
					alt: "[恐怖]"
				},
				{
					"url": "207.png",
					alt: "[忧愁]"
				},
				{
					"url": "208.png",
					alt: "[眨眉]"
				},
				{
					"url": "209.png",
					alt: "[闭眼]"
				},
				{
					"url": "210.png",
					alt: "[鄙视]"
				},
				{
					"url": "211.png",
					alt: "[阴暗]"
				},
				{
					"url": "212.png",
					alt: "[小鬼]"
				},
				{
					"url": "213.png",
					alt: "[礼物]"
				},
				{
					"url": "214.png",
					alt: "[拜佛]"
				},
				{
					"url": "215.png",
					alt: "[力量]"
				},
				{
					"url": "216.png",
					alt: "[金钱]"
				},
				{
					"url": "217.png",
					alt: "[蛋糕]"
				},
				{
					"url": "218.png",
					alt: "[彩带]"
				},
				{
					"url": "219.png",
					alt: "[礼物]"
				}
			]
		],
		//表情图片图床名称
		onlineEmoji: {
			"100.gif": "AbNQgA.gif",
			"101.gif": "AbN3ut.gif",
			"102.gif": "AbNM3d.gif",
			"103.gif": "AbN8DP.gif",
			"104.gif": "AbNljI.gif",
			"105.gif": "AbNtUS.gif",
			"106.gif": "AbNGHf.gif",
			"107.gif": "AbNYE8.gif",
			"108.gif": "AbNaCQ.gif",
			"109.gif": "AbNN4g.gif",
			"110.gif": "AbN0vn.gif",
			"111.gif": "AbNd3j.gif",
			"112.gif": "AbNsbV.gif",
			"113.gif": "AbNwgs.gif",
			"114.gif": "AbNrD0.gif",
			"115.gif": "AbNDuq.gif",
			"116.gif": "AbNg5F.gif",
			"117.gif": "AbN6ET.gif",
			"118.gif": "AbNcUU.gif",
			"119.gif": "AbNRC4.gif",
			"120.gif": "AbNhvR.gif",
			"121.gif": "AbNf29.gif",
			"122.gif": "AbNW8J.gif",
			"123.gif": "AbNob6.gif",
			"124.gif": "AbN5K1.gif",
			"125.gif": "AbNHUO.gif",
			"126.gif": "AbNIDx.gif",
			"127.gif": "AbN7VK.gif",
			"128.gif": "AbNb5D.gif",
			"129.gif": "AbNX2d.gif",
			"130.gif": "AbNLPe.gif",
			"131.gif": "AbNjxA.gif",
			"132.gif": "AbNO8H.gif",
			"133.gif": "AbNxKI.gif",
			"134.gif": "AbNzrt.gif",
			"135.gif": "AbU9Vf.gif",
			"136.gif": "AbUSqP.gif",
			"137.gif": "AbUCa8.gif",
			"138.gif": "AbUkGQ.gif",
			"139.gif": "AbUFPg.gif",
			"140.gif": "AbUPIS.gif",
			"141.gif": "AbUZMn.gif",
			"142.gif": "AbUExs.gif",
			"143.gif": "AbUA2j.gif",
			"144.gif": "AbUMIU.gif",
			"145.gif": "AbUerq.gif",
			"146.gif": "AbUKaT.gif",
			"147.gif": "AbUmq0.gif",
			"148.gif": "AbUuZV.gif",
			"149.gif": "AbUliF.gif",
			"150.gif": "AbU1G4.gif",
			"151.gif": "AbU8z9.gif",
			"152.gif": "AbU3RJ.gif",
			"153.gif": "AbUYs1.gif",
			"154.gif": "AbUJMR.gif",
			"155.gif": "AbUadK.gif",
			"156.gif": "AbUtqx.gif",
			"157.gif": "AbUUZ6.gif",
			"158.gif": "AbUBJe.gif",
			"159.gif": "AbUdIO.gif",
			"160.gif": "AbU0iD.gif",
			"161.gif": "AbUrzd.gif",
			"162.gif": "AbUDRH.gif",
			"163.gif": "AbUyQA.gif",
			"164.gif": "AbUWo8.gif",
			"165.gif": "AbU6sI.gif",
			"166.gif": "AbU2eP.gif",
			"167.gif": "AbUcLt.gif",
			"168.gif": "AbU4Jg.gif",
			"169.gif": "AbURdf.gif",
			"170.gif": "AbUhFS.gif",
			"171.gif": "AbU5WQ.gif",
			"172.gif": "AbULwV.gif",
			"173.gif": "AbUIzj.gif",
			"174.gif": "AbUTQs.gif",
			"175.gif": "AbU7yn.gif",
			"176.gif": "AbUqe0.gif",
			"177.gif": "AbUHLq.gif",
			"178.gif": "AbUOoT.gif",
			"179.gif": "AbUvYF.gif",
			"180.gif": "AbUjFU.gif",
			"181.gif": "AbaSSJ.gif",
			"182.gif": "AbUxW4.gif",
			"183.gif": "AbaCO1.gif",
			"184.gif": "Abapl9.gif",
			"185.gif": "Aba9yR.gif",
			"186.gif": "AbaFw6.gif",
			"187.gif": "Abaiex.gif",
			"188.gif": "AbakTK.gif",
			"189.gif": "AbaZfe.png",
			"190.gif": "AbaEFO.gif",
			"191.gif": "AbaVYD.gif",
			"192.gif": "AbamSH.gif",
			"193.gif": "AbaKOI.gif",
			"194.gif": "Abanld.gif",
			"195.gif": "Abau6A.gif",
			"196.gif": "AbaQmt.gif",
			"197.gif": "Abal0P.gif",
			"198.gif": "AbatpQ.gif",
			"199.gif": "Aba1Tf.gif",
			"200.png": "Aba8k8.png",
			"201.png": "AbaGtS.png",
			"202.png": "AbaJfg.png",
			"203.png": "AbaNlj.png",
			"204.png": "Abawmq.png",
			"205.png": "AbaU6s.png",
			"206.png": "AbaaXn.png",
			"207.png": "Aba000.png",
			"208.png": "AbarkT.png",
			"209.png": "AbastU.png",
			"210.png": "AbaB7V.png",
			"211.png": "Abafn1.png",
			"212.png": "Abacp4.png",
			"213.png": "AbayhF.png",
			"214.png": "Abag1J.png",
			"215.png": "Aba2c9.png",
			"216.png": "AbaRXR.png",
			"217.png": "Aba476.png",
			"218.png": "Abah0x.png",
			"219.png": "Abdg58.png"
		},
    };
  },
	components: {
		userPopup: userPopup,
		unLockPopup: unLockPopup,
		wechatPopup: wechatPopup,
		authentication: authentication
	},
	onLoad(option) {
		// 注册键盘高度变化监听
		uni.onKeyboardHeightChange(res => {
			this.handleKeyboardHeightChange(res.height)
		});
		this.to_user_id = option.user_id
		if (option.session_id) {
			this.session_id = option.session_id
		}
		//语音自然播放结束
		this.AUDIO.onEnded((res) => {
			this.playMsgid = null;
		});
		// #ifndef H5
		//录音开始事件
		this.RECORDER.onStart((e) => {
			this.recordBegin(e);
		})
		//录音结束事件
		this.RECORDER.onStop((e) => {
			this.recordEnd(e);
		})
		// #endif
		uni.$on('message', this.getMessage)
		uni.$on('connect-success', this.connectSuccess)
	},
	onShow() {
		if (this.to_user_id) {
			this.getUserHome()
			this.getUserInfo()
		}
	},
// 页面卸载时取消监听
onUnload() {
	uni.$off('message', this.getMessage)
	uni.$on('connect-success', this.connectSuccess)
	// 取消监听键盘事件
	uni.offKeyboardHeightChange(this.handleKeyboardHeightChange);
},
  methods: {
    handleKeyboardHeightChange(res) {
    				const height = res;
    				if (height > 0) {
    					this.isShowKeyBoard = true;
    					console.log('键盘弹起，高度为:', height + 'px');
    					// 这里可以触发页面布局调整逻辑（例如：滚动输入框到可视区域）
    				} else {
    					this.isShowKeyBoard = false;
    					console.log('键盘收回');
    					// 恢复页面布局
    				}
    			},
    			completeInfo() {
    				this.showImprove = false
    				uni.navigateTo({
    					url: '/pages/mine/add-contact'
    				})
    			},
    			//关注成功
    			followSuccess() {
    				this.getUserInfo()
    				this.getUserHome()
    			},
    			//提交认证
    			authSuccess() {
    				this.showAuth = false
    				this.$Tips('/pages/authentication/authentication')
    			},
    			queryList() {
    				if (this.msgInfo.next_page != 'done') {
    					this.sendMessage({
    						c: "Message",
    						a: "chat_record",
    						data: {
    							session_id: this.session_id,
    							page: this.msgInfo.next_page
    						}
    					})
    				} else {
    					if (this.$refs.paging) {
    						this.$refs.paging.complete(this.msgList)
    					}
    				}
    			},
    			sendMessage(param) {
    				if (app.globalData.socketObj) {
    					app.globalData.socketObj.sendMsg(param)
    				}
    			},
    			scrollTo(type, id) {
    				if (this.$refs.paging) {
    					if (type == 1) {
    						this.$refs.paging.scrollToBottom(false)
    					} else {
    						this.$refs.paging.scrollIntoViewById('msg' + id, 100, false)
    					}
    				}
    			},
    			// 接收到消息的回调
    			getMessage(msg) {
    				let messageData = JSON.parse(msg.data)
    				console.log("收到消息了", messageData)
    				if (messageData.msgtype == "new_message") {
    					this.sendMessage({
    						c: "Message",
    						a: "read_message",
    						data: {
    							record_id: messageData.data.record_id,
    						}
    					})
    					this.msgList[0].data.push(messageData.data);
    					this.scrollTo(1)
    				}
    				if (messageData.msgtype == "chat_record") {
    					this.msgInfo = messageData.data
    					let msgList = []
    					msgList = messageData.data.chat_record
    					for (var i = 0; i < msgList.length; i++) {
    						msgList[i].data = msgList[i].data.reverse()
    					}
    					if (this.msgInfo.page == 1) {
    						this.msgList = msgList
    						this.scrollTo(1)
    					} else {
    						for (let i = 0; i < msgList.length; i++) {
    							this.msgList.unshift(msgList[i]);
    						}
    						console.log(this.msgList)
    						let lastid = this.msgList[0].data[this.msgList[0].data.length - 1].id;
    						this.scrollTo(2, lastid)
    					}
    					if (this.$refs.paging) {
    						this.$refs.paging.complete(this.msgList);
    					}
    					if (this.to_user_id == 3) {
    						this.toUserInfo = this.msgInfo.session_info
    						this.toUserInfo.is_unlock = true
    					}
    				}
    				if (messageData.msgtype == "send_message") {
    					this.scrollTo(1)
    				}
    				if (messageData.msgtype == "add_session") {
    					this.session_id = messageData.data.id
    					this.getMsgList();
    				}
    			},
    			connectSuccess() {
    				console.log('连接成功')
    				this.getMsgList();
    			},
    			//返回
    			navigatorBack() {
    				uni.navigateBack({
    					delta: 1
    				})
    			},
    			getUserInfoWx() {
    				this.$Api['user'].getUserInfoWx({
    					from_user_id: this.to_user_id,
    				}).then(res => {
    					this.userWechat = res.data.wechat
    					this.showWechat = true
    				})
    			},
    			lookWechat() {
    				if (this.userInfo.gender == 1) {
    					if (this.toUserInfo.is_unlock) {
    						this.getUserInfoWx()
    					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
    						this.confirmUserUnLock(this.to_user_id)
    					} else {
    						this.showUnLock = true
    					}
    				}
    			},
    			confirmUserUnLock(user_id) {
    				this.$Api['user'].subUserUnLock({
    					to_user_id: user_id,
    					type: '1'
    				}).then(res => {
    					this.unLockSuccess(user_id)
    				})
    			},
    			selectAction(e) {
    				if (e.name == '拉黑') {
    					this.$Api['user'].editBlackUser({
    						session_user_id: this.to_user_id,
    					}).then(res => {
    						this.$Toast('加入黑名单成功')
    					})
    				}
    				if (e.name == '关注' || e.name == '取消关注') {
    					this.friendsFollow()
    				}
    				if (e.name == '举报') {
    					this.$Tips('/pages/report/report?user_id=' + this.to_user_id)
    				}
    			},
    			//用户关注
    			friendsFollow() {
    				this.$Api['user'].friendsFollow({
    					user_id: this.to_user_id
    				}).then(res => {
    					this.getUserHome()
    				})
    			},
    			unLockSuccess(id) {
    				this.showUnLock = false
    				this.getUserHome()
    				this.getUserInfo()
    			},
    			getInitialize() {
    				this.$Api['user'].getInitialize({
    					modulename: this.userInfo.username
    				}).then(res => {
    					this.chartConfig = res.data
    					// 如果已经有sockt实例
    					if (app.globalData.socketObj) {
    						// 如果sockt实例未连接
    						if (!app.globalData.socketObj.isConnect) {
    							app.globalData.socketObj.initSocket()
    						}
    					} else {
    						// 如果没有sockt实例，则创建
    						app.globalData.socketObj = new WebSocketClass(
    							HTTP_WSS_URL +
    							`/?modulename=${this.chartConfig.user_info.username}&token=${this.chartConfig.token_list.fastchat_token}&fastchat_user=`,
    							10)
    						app.globalData.socketObj.initSocket()
    					}
    					if (app.globalData.socketObj.isConnect) {
    						this.getMsgList();
    					}
    				})
    			},
    			getUserHome() {
    				if (this.to_user_id != 3) {
    					this.$Api['user'].getUserHome({
    						user_id: this.to_user_id
    					}).then(res => {
    						this.toUserInfo = res.data
    					})
    				}
    
    			},
    			getUserInfo() {
    				this.$Api['user'].getUserInfo().then(res => {
    					this.userInfo = res.data
    					this.getInitialize()
    				})
    			},
    			// 接受消息(筛选处理)
    			screenMsg(msg) {
    				// 用户消息
    				switch (msg.msg.type) {
    					case 'text':
    						this.addTextMsg(msg);
    						break;
    					case 'voice':
    						this.addVoiceMsg(msg);
    						break;
    					case 'img':
    						this.addImgMsg(msg);
    						break;
    				}
    				console.log('用户消息');
    			},
    			// 加载初始页面消息
    			getMsgList() {
    				if (this.session_id) {
    					// 消息列表
    					this.sendMessage({
    						c: "Message",
    						a: "chat_record",
    						data: {
    							session_id: this.session_id,
    							page: 1
    						}
    					})
    				} else {
    					this.sendMessage({
    						"c": "Message",
    						"a": "add_session",
    						"data": {
    							"user_id": this.to_user_id + "||user"
    						}
    					})
    				}
    			},
    			//更多功能(点击+弹出) 
    			showMore() {
    				this.isVoice = false;
    				this.hideEmoji = true;
    				if (this.hideMore) {
    					this.hideMore = false;
    					this.openDrawer();
    				} else {
    					this.hideDrawer();
    				}
    			},
    			// 打开抽屉
    			openDrawer() {
    				this.popupLayerClass = 'showLayer';
    			},
    			// 隐藏抽屉
    			hideDrawer() {
    				this.popupLayerClass = '';
    				setTimeout(() => {
    					this.hideMore = true;
    					this.hideEmoji = true;
    				}, 150);
    			},
    			// 发送文字消息
    			sendText() {
    				this.hideDrawer(); //隐藏抽屉
    				if (!this.textMsg) {
    					return;
    				}
    				let content = this.replaceEmoji(this.textMsg);
    				if (this.userInfo.gender == 1) {
    					if (this.toUserInfo.is_unlock) {
    						this.addTextMsg(content);
    					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
    						this.confirmUserUnLock(this.to_user_id)
    					} else {
    						this.showUnLock = true
    					}
    				} else {
    					if (this.userInfo.is_auth != 1) {
    						this.showAuth = true
    					} else {
    						this.addTextMsg(content);
    					}
    				}
    				this.textMsg = ''; //清空输入框
    			},
    			//卡片
    			chooseCard() {
    				if (this.userInfo.gender == 1) {
    					if (this.toUserInfo.is_unlock) {
    						this.sendCard();
    					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
    						this.confirmUserUnLock(this.to_user_id)
    					} else {
    						this.showUnLock = true
    					}
    				} else {
    					if (this.userInfo.is_auth != 1) {
    						this.showAuth = true
    					} else {
    						this.sendCard();
    					}
    				}
    			},
    			sendCard() {
    				console.log(this.userInfo.wechat, 9999)
    				if (!this.userInfo.wechat) {
    					this.showImprove = true
    					this.hideDrawer();
    					return false
    				}
    				let lastid = 0
    				if (this.msgList[this.msgList.length - 1].data.length) {
    					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data
    						.length -
    						1].id;
    					lastid++;
    				}
    				this.msgList[this.msgList.length - 1].data.push({
    					id: lastid,
    					sender: 'me',
    					msg_type: '3',
    					message: this.userInfo.wechat,
    				})
    				this.sendMessage({
    					c: "Message",
    					a: "send_message",
    					data: {
    						message: this.userInfo.wechat,
    						msg_type: '3',
    						session_id: this.session_id
    					}
    				})
    				this.hideDrawer();
    			},
    			// 选择图片发送
    			chooseImage() {
    				if (this.userInfo.gender == 1) {
    					if (this.toUserInfo.is_unlock) {
    						this.getImage('album');
    					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
    						this.confirmUserUnLock(this.to_user_id)
    					} else {
    						this.showUnLock = true
    					}
    				} else {
    					if (this.userInfo.is_auth != 1) {
    						this.showAuth = true
    					} else {
    						this.getImage('album');
    					}
    				}
    			},
    			//拍照发送
    			camera() {
    				if (this.userInfo.gender == 1) {
    					if (this.toUserInfo.is_unlock) {
    						this.getImage('camera');
    					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
    						this.confirmUserUnLock(this.to_user_id)
    					} else {
    						this.showUnLock = true
    					}
    				} else {
    					if (this.userInfo.is_auth != 1) {
    						this.showAuth = true
    					} else {
    						this.getImage('camera');
    					}
    				}
    			},
    			//选照片 or 拍照
    			getImage(type) {
    				this.hideDrawer();
    				uni.chooseImage({
    					sourceType: [type],
    					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    					success: (res) => {
    						for (let i = 0; i < res.tempFilePaths.length; i++) {
    							uni.getImageInfo({
    								src: res.tempFilePaths[i],
    								success: async (image) => {
    									console.log(image.width);
    									console.log(image.height);
    									const result = await this.$uploadFilePromise(res.tempFilePaths[
    										i])
    									if (result) {
    										let msg = {
    											url: result.fullurl,
    											w: image.width,
    											h: image.height
    										};
    										this.addImgMsg(msg);
    									}
    								}
    							});
    
    						}
    					}
    				});
    			},
    			// 选择表情
    			chooseEmoji() {
    				this.hideMore = true;
    				if (this.hideEmoji) {
    					this.hideEmoji = false;
    					this.openDrawer();
    				} else {
    					this.hideDrawer();
    				}
    			},
    			//添加表情
    			addEmoji(em) {
    				this.textMsg += em.alt;
    			},
    
    			//获取焦点，如果不是选表情ing,则关闭抽屉
    			textareaFocus() {
    				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
    					this.hideDrawer();
    				}
    			},
    
    			//替换表情符号为图片
    			replaceEmoji(str) {
    				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
    					console.log("item: " + item);
    					for (let i = 0; i < this.emojiList.length; i++) {
    						let row = this.emojiList[i];
    						for (let j = 0; j < row.length; j++) {
    							let EM = row[j];
    							if (EM.alt == item) {
    								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
    								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
    								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
    								let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
    								console.log("imgstr: " + imgstr);
    								return imgstr;
    							}
    						}
    					}
    				});
    				// return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
    				return replacedStr;
    			},
    			// 添加文字消息到列表
    			addTextMsg(msg) {
    				let lastid = 0
    				if (this.msgList[this.msgList.length - 1].data.length) {
    					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data.length -
    						1].id;
    					lastid++;
    				}
    				//风控
    				// if(messageData.code==0){
    				// 	this.$Toast(messageData.msg)
    				// }
    				this.msgList[this.msgList.length - 1].data.push({
    					id: lastid,
    					sender: 'me',
    					msg_type: '1',
    					message: msg
    				})
    				this.sendMessage({
    					c: "Message",
    					a: "send_message",
    					data: {
    						message: msg,
    						msg_type: '1',
    						session_id: this.session_id
    					}
    				})
    			},
    			// 添加语音消息到列表
    			addVoiceMsg(msg) {
    				this.msgList.push(msg);
    			},
    			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    			setPicSize(content) {
    				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
    				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
    				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
    				if (content.w > maxW || content.h > maxH) {
    					let scale = content.w / content.h;
    					content.w = scale > 1 ? maxW : maxH * scale;
    					content.h = scale > 1 ? maxW / scale : maxH;
    				}
    				return content;
    			},
    			// 添加图片消息到列表
    			addImgMsg(msg) {
    				let content = this.setPicSize(msg);
    				// this.msgImgList.push(msg.msg.content.url);
    				let lastid = 0
    				if (this.msgList[this.msgList.length - 1].data.length > 0) {
    					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data.length -
    						1].id;
    					lastid++;
    				}
    				// let imgStr = `<img src="${msg.url}" style="width:${content.w}px; height:${content.h}px;">`;
    				this.msgList[this.msgList.length - 1].data.push({
    					id: lastid,
    					sender: 'me',
    					msg_type: '2',
    					message: msg.url
    				})
    				this.sendMessage({
    					c: "Message",
    					a: "send_message",
    					data: {
    						message: msg.url,
    						msg_type: '2',
    						session_id: this.session_id
    					}
    				})
    			},
    			// 预览图片
    			showPic(url) {
    				uni.previewImage({
    					indicator: "none",
    					urls: [url]
    				});
    			},
    			// 播放语音
    			playVoice(msg) {
    				this.playMsgid = msg.id;
    				this.AUDIO.src = msg.content.url;
    				this.$nextTick(function() {
    					this.AUDIO.play();
    				});
    			},
    			// 录音开始
    			voiceBegin(e) {
    				if (e.touches.length > 1) {
    					return;
    				}
    				this.initPoint.Y = e.touches[0].clientY;
    				this.initPoint.identifier = e.touches[0].identifier;
    				this.RECORDER.start({
    					format: "mp3"
    				}); //录音开始,
    			},
    			//录音开始UI效果
    			recordBegin(e) {
    				this.recording = true;
    				this.voiceTis = '松开 结束';
    				this.recordLength = 0;
    				this.recordTimer = setInterval(() => {
    					this.recordLength++;
    				}, 1000)
    			},
    			// 录音被打断
    			voiceCancel() {
    				this.recording = false;
    				this.voiceTis = '按住 说话';
    				this.recordTis = '手指上滑 取消发送'
    				this.willStop = true; //不发送录音
    				this.RECORDER.stop(); //录音结束
    			},
    			// 录音中(判断是否触发上滑取消发送)
    			voiceIng(e) {
    				if (!this.recording) {
    					return;
    				}
    				let touche = e.touches[0];
    				//上滑一个导航栏的高度触发上滑取消发送
    				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
    					this.willStop = true;
    					this.recordTis = '松开手指 取消发送'
    				} else {
    					this.willStop = false;
    					this.recordTis = '手指上滑 取消发送'
    				}
    			},
    			// 结束录音
    			voiceEnd(e) {
    				if (!this.recording) {
    					return;
    				}
    				this.recording = false;
    				this.voiceTis = '按住 说话';
    				this.recordTis = '手指上滑 取消发送'
    				this.RECORDER.stop(); //录音结束
    			},
    			//录音结束(回调文件)
    			recordEnd(e) {
    				clearInterval(this.recordTimer);
    				if (!this.willStop) {
    					console.log("e: " + JSON.stringify(e));
    					let msg = {
    						length: 0,
    						url: e.tempFilePath
    					}
    					let min = parseInt(this.recordLength / 60);
    					let sec = this.recordLength % 60;
    					min = min < 10 ? '0' + min : min;
    					sec = sec < 10 ? '0' + sec : sec;
    					msg.length = min + ':' + sec;
    					// this.sendMsg(msg, 'voice');
    				} else {
    					console.log('取消发送录音');
    				}
    				this.willStop = false;
    			},
    			// 切换语音/文字输入
    			switchVoice() {
    				this.hideDrawer();
    				this.isVoice = this.isVoice ? false : true;
    			},
    			discard() {
    				return;
    			},
    focusTextarea(e) {
		if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
			this.hideDrawer();
		}
      this.inputBottom = e.detail.height;
      this.scrollTop += 1; //滚到底部
    },
    blurTextarea(e) {
      this.inputBottom = 0;
      this.scrollTop += 1; //滚到底部
    },
  },
};
</script>

<style lang="scss">
@import "@/static/HM-chat/css/style.scss";
.container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 52px;
  display: flex;
  flex-direction: column;
  .header {
	width: 100%;
	flex-shrink: 0;
	.pageBg {
		position: absolute;
		top: 0;
		width: 100%;
		/* #ifdef H5 */
		height: 120rpx;
		/* #endif */
		/* #ifndef H5 */
		height: 180rpx;
		/* #endif */
	}

	.waring-text {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		background-color: #FFE9FC;
		font-size: 24rpx;
		color: #F169F6;
	}

	.nav-box {
		padding: 20rpx;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		align-content: center;
		font-size: 28rpx;
		color: #323334;
		.nav-left,
		.nav-right {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-right: 32rpx;

			.arrow-left {
				width: 24rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.unlock {
				width: 148rpx;
				height: 58rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #28C445;
				border-radius: 44rpx;
				font-size: 30rpx;
				color: #FFFFFF;

				.icon_wx {
					width: 38rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.more {
				width: 12rpx;
				height: 40rpx;
				margin-left: 42rpx;
			}

			.user-box {
				display: flex;
				align-items: center;

				.user-avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 10rpx;

				}

				.user-info {
					font-size: 24rpx;
					color: #9A9A9A;

					.name {
						font-weight: bold;
						font-size: 28rpx;
						color: #323334;
					}

					.detail {
						margin-top: 10rpx;
						letter-spacing: 4rpx;
					}
				}
			}
		}
	}

}
  .content {
    flex-grow: 1;
    overflow: auto;
    .message {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .message-content {
        width: auto;
        max-width: calc(100vw - 80rpx);
        word-wrap: break-word;
        box-sizing: border-box;
        padding: 32rpx;
        line-height: 48rpx;
        background: pink;
        border-radius: 16rpx 0px 16rpx 16rpx;
      }
      .message-time {
        line-height: 32rpx;
        margin-top: 16rpx;
      }
    }
  }
}
.popup-close {
	position: absolute;
	right: 0;
	top: -120rpx;
	width: 88rpx;
	height: 88rpx;
}

.popup-image {
	margin-top: 60rpx;
	width: 412rpx;
	height: 316rpx;
}

.popup-title {
	font-weight: 600;
	font-size: 34rpx;
	color: #323334;
	text-align: center;
}


.popup-tips {
	margin-top: 18rpx;
	font-size: 28rpx;
	color: #9A9A9A;
}

.button-group {
	margin-top: 68rpx;

	.title {
		display: block;
		color: #ffffff;
		text-decoration: none;
	}

	.button1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		width: 600rpx;
		height: 88rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		border-radius: 44rpx;
	}
}
.bottom-textarea {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  .textarea-container {
    flex: 1;
    > textarea {
      font-size: 36rpx;
      color: rgba(8, 8, 8, 1);
      width: auto;
    }
  }
}
</style>